<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<style>
  .div1{
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<body>

    <div id="app">
<p>1.按键修饰符</p>
        <!-- 事件名为keyup，使用.enter修饰符，当按下回车键时触发add方法 -->
    <input @keyup.enter="add1"   type="text" />

<p>2.v-model修饰符.trim和.</p>
    <p>trim修饰符：去除前后空格</p>
    <input   v-model.trim="todeName1" type="text"/>
    <br>
    <p>.number修饰符：将输入的值转为数字</p>
    <input   v-model.number="todeName2"  type="text"/>

<p>3.事件修饰符</p>
<p>.stop:阻止冒泡</p>
    <div class="div1" @click="fu">父盒子
    <div class="div2" @click.stop="zi">子盒子</div>
</div>




    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      todeName1:"",
      todeName2:""
    },
    methods: {
      add1(e){
        console.log("回车键被按下");
      },
      add2(e){
        console.log("回车键被按下");
      },
      add3(e){
        console.log("回车键被按下");
      },
fu(){
    console.log("父盒子被点击")
},
zi(){ 
    console.log("子盒子被点击")
}
    
    }
  })

</script>
</body>
</html>
